<template>
    <div>

        <div class="marLR20">
            <p class="paddT20 font14">姓名：{{userName}}</p>
            <p class="paddBT20 font14">工号：{{staffNum}}</p>

            <div>
                <el-table :data="formatData" :row-style="showRow" v-bind="$attrs" border="true" class="tableWrapper" @header-click="toggleExpandedAll">
                    <!-- 权限菜单 -->
                     <!-- 公司人员 -->
                    <!-- <el-table-column v-for="(column, index) in columns" :key="column.text" :label="column.text" :width="column.width" :fixed="column.text === '权限菜单' || column.text === userName" :index="column.index" align="center"> -->
                    <el-table-column v-for="(column, index) in columns" 
                                                :key="column.text" 
                                                :label="column.text"                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
                                                :width="column.width" 
                                                :fixed="column.text === '权限菜单(+ / -)' || column.text === userName" 
                                                :index="column.index" 
                                                :resizable="false" 
                                                :align="column.text === '权限菜单(+ / -)' ? 'left' : 'center'"
                                                :type="expand">
                        <template slot-scope="scope">
                            <!-- <span v-if="index === 0" v-for="space in scope.row._level" class="ms-tree-space" :key="space"></span> -->
                            <template v-if="index === 0">
                                <span v-for="space in scope.row._level" class="ms-tree-space" :key="space"></span>
                            </template>
                            <span class="tree-ctrl" v-if="iconShow(index,scope.row)" @click="toggleExpanded(scope.$index)">
                                <i v-if="!scope.row._expanded" class="el-icon-plus"></i>
                                <i v-else class="el-icon-minus"></i>
                            </span>
                            <!-- <span v-if="column.value === '✕'"></span> -->
                            <span :class="{orangeColor:scope.row[column.value] === '√',lightGrayColor:scope.row[column.value] === '✕'}">{{scope.row[column.value]}}</span>
                        </template>
                    </el-table-column>

                    <slot></slot>
            </el-table>
            </div>
        </div>

        

    </div>
</template>

<script>
import http from '@/assets/js/http'
import _g from '@/assets/js/global'
import treeToArray from '@/assets/js/eval'
 import { mapGetters } from 'vuex'

import treeTable from '@/components/Common/TreeTable'


export default {
    components: { treeTable },
    data(){
        return{
        
        /* 表头 */
        columns: [],
           
            userId:'',                                                              //..用户id
            userName:'',                                                //..姓名
            staffNum:'',                                                     //..工号

            powerList: [],                                          //  权限菜单列表

            changeData:[],                                      //  变化中的权限菜单列表，主要是为了拷贝权限
            

            isMenuExpand:false,                         //  菜单默认收缩

            defaultProps: {
                children: 'children',
                label: 'menu_name'
            },

        }
    },
    computed: {
    // 格式化数据源 tree-grid
    formatData: function() {
      let tmp
      let data
      let len
      if (!Array.isArray(this.powerList)) {
        tmp = [this.powerList]
      } else {
        tmp = this.powerList
      }
      const func = treeToArray
      const args = Array.concat([tmp]) 
      
      data = func.apply(null, args)
      len = data.length
       
      return data
    }
  },
    methods: {
         /* 切换菜单全部展开或全部折叠 */
        toggleExpandedAll(column, event){
                const that = this
              /* 一键展开 */
              if(column.label === '权限菜单(+ / -)'){
                  that.expandedAllMenu();
              }
        },
        /* 根据表格显示规则，格式化数据 */
        formatDataByTableRule(){
            const that = this
            let tmpList = that.changeData

             let columns = []
             let column = {}   
             
             let tmpMenuList = []
             let powerList = []                                                                 //  当前用户权限菜单


            // 找出当前用户信息
            for(let i = 0;i < tmpList.length;i++){
                column = {
                    id:'id',                                                                                                 //  菜单id
                    index:i,                                                                                                //  人员索引
                    userId:tmpList[i].userId,
                    text : tmpList[i].user_name,
                    value : 'txt' + tmpList[i].userId,
                    haspower : 'haspower',
                }

                if(tmpList[i].userId == that.userId){                                                  //  如果找到当前用户

                    columns.unshift(column)
                    that.powerList = [].concat(tmpList[i].menu)

                }
            }
            columns.unshift({
                    id:'id',                                                  //..菜单id
                    text: '权限菜单(+ / -)',
                    index:'index',                                               //..人员索引
                    value: 'menu_name',
                    haspower:'haspower',
                    width: 450
            })
            that.columns = [].concat(columns)
        },

        /* 查询所有人员权限菜单树 */
        queryMenuTreeAllUsers(id){
            const that = this
            let data = {
                id
            }
             
            _g.showLoading('权限加载中')
            that.apiPost("admin/users/queryMenuTreeAllUsers",data).then(res => {
                _g.showLoading().close()
                if(typeof res === 'string'){
                      res = JSON.parse(res)
                    }
                    if ((res.code || res.code === 0)  && res.code != 200) {
                      this.handleError(res)
                    } else if(res.data.isSuccess === 0){                                                            //  成功
                        that.changeData = [].concat(res.data.users)
                        
                        that.formatDataByTableRule()
                        
                    }else if(res.data.isSuccess === 1){
                        _g.toastMsg("error", res.message)
                    }
            })
        },

        /* 下面为tree-grid */
        showRow: function(row) {
            const show = (row.row.parent ? (row.row.parent._expanded && row.row.parent._show) : true)
            row.row._show = show
            return show ? 'animation:treeTableShow 1s;-webkit-animation:treeTableShow 1s;' : 'display:none;'
            },
        // 切换下级是否展开
        toggleExpanded: function(trIndex) {
            const record = this.formatData[trIndex]

            record._expanded = !record._expanded

        },
        // 图标显示
        iconShow(index, record) {
            return (index === 0 && record.children && record.children.length > 0)
        },
        // 一键展开或收缩全部菜单
        expandedAllMenu: function() {
            let formatData = this.formatData
            const len = formatData.length
            if(this.isMenuExpand){                                                      //  如果菜单被一键展开
                for(let i = 0;i < len;i++){
                    const record = this.formatData[i]
                        record._expanded = false
                        this.formatData[i]._expanded = false
                }
            }else{
                for(let i = 0;i < len;i++){
                    const record = this.formatData[i]
                        record._expanded = true
                        this.formatData[i]._expanded = true
                }
            }
            this.isMenuExpand = !this.isMenuExpand
        },
    },
    created () {
        this.userId = this.$route.params.userId
        this.selUserId = this.$route.params.userId
        this.userName = this.$route.params.userName
        this.staffNum = this.$route.params.staffNum
        this.queryMenuTreeAllUsers()
        // this.getAllUsers()
    },
    mixins: [http]
}
</script>

<style scoped>
.titleBar{
    font-size: 14px;
    color: #ef8200;
    border: 1px dashed rgb(242,181,107);
    background-color: rgb(246,232,215);
    height: 30px;
    line-height: 30px;
    padding-left: 10px;
}
</style>

<style rel="stylesheet/css">
  @keyframes treeTableShow {
      /* tree-grid */
    from {opacity: 0;}
    to {opacity: 1;}
  }
  @-webkit-keyframes treeTableShow {
    from {opacity: 0;}
    to {opacity: 1;}
  }
</style>

<style lang="scss" rel="stylesheet/scss" scoped>
  /* tree-grid */
  $color-blue: #2196F3;
  $space-width: 18px;
  .ms-tree-space {
    position: relative;
    top: 1px;
    display: inline-block;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    width: $space-width;
    height: 14px;
    &::before {
      content: ""
    }
  }
  .processContainer{
    width: 100%;
    height: 100%;
  }
  table td {
    line-height: 26px;
  }

  .tree-ctrl{
    position: relative;
    cursor: pointer;
    color: $color-blue;
    margin-left: -$space-width;
  }
</style>

